<?php
/**
 * Created by PhpStorm.
 * User: jcc
 * Date: 16/7/8
 * Time: 上午10:16
 */
use app\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Carousel;
use yii\widgets\ActiveForm;
$user_id=\Yii::$app->user->id;
$this->title =$shopName;
AppAsset::register($this);
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/slick/slick-theme.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/slick/slick.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/css/home.css");
AppAsset::addScript($this, Yii::$app->request->baseUrl . "/slick/slick.min.js");
$base = Yii::$app->request->baseUrl;

?>
<div class="search-modal">
<?php $form = ActiveForm::begin(['options' => ['class' => 'search_bar']]); ?>
    <span class="glyphicon glyphicon-search img-search" aria-hidden="true"></span>
<input results="s" class="search-input" name="input_text" id="inputValue" placeholder="搜索店内商品">
<!--    <input type="submit" value="Submit">-->
<?php ActiveForm::end(); ?>
</div>
<div style="height: 200px;width: 100%;margin-bottom: 0px" class="test">
    <?php for ($i = 0; $i < count($banners); $i++) { ?>
        <?php if($banners[$i]['content'] == ''){?>
                <img class="test" style="width: 100%;height: 200px" src="<?= $banners[$i]['pic_url']?>" />
        <?php }else{ ?>
                <img class="test" style="width: 100%;height: 200px" src="<?= $banners[$i]['pic_url']?>" onclick="clickBannerDetail(<?= $banners[$i]['banner_id']?>)"/>
        <?php } ?>
    <?php } ?>
</div>

<div style="margin-bottom: 100px;background-color: #f6f6f6">
    <div style="height: 1px"></div>
    <div class="title" onclick="showCommodityList(1)"><img style="float: left;line-height: 30px;margin-right: 6px" src="<?= $base ?>/images/new_icon.png"/>
        最热商品<img style="float: right;line-height:30px;margin-top:3px;margin-right: 10px" src="<?= $base ?>/images/ic_right.png">
    </div>
    <?php
    $hotCommodities = $commoditylist['hotCommodities'];
    $hotcount = count($hotCommodities);
    for ($i = 0; $i < $hotcount; $i++) {
        ?>
        <div class="left" onclick="clickCommodity(<?= $hotCommodities[$i]['commodity_id'] ?>)">
            <div class="image-new"><img class="commodity-image" hidden="true" src="<?= $hotCommodities[$i]['pic_url'] ?>"></div>
            <div class="commodity-name">
                <?= $hotCommodities[$i]['commodity_name'] ?>
            </div>
            <div class="commodity-price">
                ¥<?= $hotCommodities[$i]['price'] ?>
                <span style="float: right">销量:<?= $hotCommodities[$i]['sales_num']?></span>
            </div>
        </div>
    <?php } ?>
    <div class="title" onclick="showCommodityList(0)"><img style="float: left;line-height: 30px;margin-right: 6px" src="<?= $base ?>/images/new_icon.png"/>
        最新上架<img style="float: right;line-height:30px;margin-top:3px;margin-right: 10px" src="<?= $base ?>/images/ic_right.png">
    </div>
    <?php
    $newCommodities = $commoditylist['newCommodities'];
    $newcount = count($newCommodities);
    for ($i = 0; $i < $newcount; $i++) {
        ?>
        <div class="left" onclick="clickCommodity(<?= $newCommodities[$i]['commodity_id'] ?>)">
            <div class="image-new">
                <img class="commodity-image" hidden="true" src="<?= $newCommodities[$i]['pic_url'] ?>"></div>
            <div class="commodity-name">
                <?= $newCommodities[$i]['commodity_name'] ?>
            </div>
            <div class="commodity-price">
                ¥<?= $newCommodities[$i]['price'] ?>
                <span style="float: right">销量:<?=$newCommodities[$i]['sales_num']?></span>
            </div>
        </div>
    <?php } ?>
    <div style="clear: both"></div>
</div>
<div class="list-footer-button">
    <div class="homePage"><img id="homePage" style="width: 44.78%" src="<?= $base ?>/images/store_icon@2x.png"/></div>
    <div class="commoditys" onclick="allCategory()">
        <span>所有分类</span>
        <!-- 子菜单  -->
        <div class="allCategory">
            <span class="before-arrow"></span>
            <ul>
                <?php
                    for($i = 0;$i < count($categoryList);$i++){?>
                        <li>
                            <a href="../category/category-list?type=<?= $categoryList[$i]['category_name'] ?>
                            &share_id=<?php echo $share_id?>"><?= $categoryList[$i]['category_name'] ?></a>
                        </li>
                        <hr/>
                    <?php } ?>
                <li>
                    <div onclick="showCommodityList(2)">所有商品</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="shopping-cart" onclick="clickShoppingCart()">购物车</div>
    <div class="my-order" onclick="clickMyCenter()">个人中心</div>
</div>


<script language="JavaScript">
    $(document).ready(function () {
        console.log($('.test'))
        $('.test').slick({
            'autoplay': true,
            'dots': true
        });

        var width = $('.test').width();
        var height = width*0.4;
        $('.test').css("height",height);


        $(".search-input").click(function(event){

            event.stopPropagation();
            $(".search-modal").addClass('mask');
        })
        $('body :not(:has(.search-input)').click(function () {
            document.activeElement.blur();
            $(".search-modal").removeClass('mask');
            console.log("blur");
        });

    });
    //判断是否为Iphone
  //  var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
    // 元素失去焦点隐藏iphone的软键盘
//    function objBlur(id,time){
//        if(typeof id != 'string') throw new Error('objBlur()参数错误');
//        var obj = document.getElementById(id),
//            time = time || 300,
//            docTouchend = function(event){
//                if(event.target!= obj){
//                    setTimeout(function(){
//                        obj.blur();
//                        document.removeEventListener('touchend', docTouchend,false);
//                    },time);
//                }
//            };
//        if(obj){
//            obj.addEventListener('focus', function(){
//                document.addEventListener('touchend', docTouchend,false);
//            },false);
//        }else{
//            throw new Error('objBlur()没有找到元素');
//        }
//    }
//
//    if(isIPHONE){
//        var input = new objBlur('input');
//        input=null;
//    }
    //解决iphone失去焦点问题


    $(".image-new").css("height", $(".image-new").css("width"));
    var height = $(".image-new").css("height");
    heightInt = height.substring(0,height.length-2);
    var lineHeight = heightInt - 4;
//    console.log(parseInt(heightInt)-2);
    $(".image-new").css("line-height",lineHeight + 'px');
    $(document).ready(function(){
        function imageLoaded(){
            $(this).attr("hidden",false);
            var height = $(this).css('height');
            var width = $(this).css('width');
            if (parseInt(height.substring(0,height.length-2))>parseInt(width.substring(0,width.length-2))){
                $(this).css('height',"100%");
                $(this).width('auto');
            }else {
                $(this).css('width',"100%")
                $(this).height('auto');
            }
        }
        $(".commodity-image").each(function(){
            if(this.complete){
                imageLoaded.call(this);
            }else{
                $(this).one('load', imageLoaded);
            }
        });
    });

    function clickBannerDetail(banner_id) {
        location.href='banner-detail?banner_id='+banner_id;
    }

    function showCommodityList(is_hot) {
        location.href = "list?is_hot=" + is_hot;
    }
    function clickHomePage() {
        location.href = "home";

    }
    function clickShoppingCart() {
        location.href = "shop-bag";
    }
    function clickMyCenter() {
        location.href = "personal-center";
    }
    function clickCommodity(commodity_id){
        location.href = "../commodity-detail/detail?commodity_id=" + commodity_id+"&share_id="+<?php echo $share_id?>;
    }
    function allCategory() {
        if($('.allCategory').css('display') == 'none'){
            $('.allCategory').css('display','block');
        }else {
            $('.allCategory').css('display','none');
        }
    }
</script>